<template>
  <view class="hb-p-4">
    <view class="hb-p-4 hb-bg-white hb-box-shadow-base hb-rounded-xl">
      <Paglist
        v-model="dataList"
        :is-init-api="true"
        :is-show-loadmore="false"
        :params="{ circleId: props.id }"
        @register="register"
      >
        <template v-for="item in dataList" :key="item.id">
          <FileItem
            :item="item"
            :show-setting="roleType !== RoleTypeEnum.MEMBER"
            @setting="handleSetting"
            @open-document="handleOpenDocument"
          />
        </template>
      </Paglist>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { circleFileList } from '@/api/contact';
  import { CircleFileListResult } from '@/api/contact/types';
  import { useConList } from '@/components/Paglist/useConList';
  import { RoleTypeEnum } from '@/enums/LoginEnum';
  import { useUpload } from '@/hooks/file/useUpload';
  import FileItem from './FileItem.vue';

  const props = defineProps<{
    id: number;
    roleType: RoleTypeEnum;
    updateFileNum: (type: 'add' | 'subtract', num: number) => void;
  }>();

  const { openDocument } = useUpload();
  const handleOpenDocument = (item: CircleFileListResult) => {
    openDocument({ filePath: item.filePathUrl, fileType: item.fileSuffix });
  };

  const dataList = ref<CircleFileListResult[]>([]);
  const [register, { refresh }] = useConList({ api: circleFileList });
  provide('api', null);

  /** 设置 */
  function handleSetting(item: CircleFileListResult) {
    navigateTo({
      name: 'circleFileSetting',
      options: {
        data: item,
        circleId: props.id,
        success: (type) => {
          if (type === 'delete') props.updateFileNum('subtract', 1);
          refresh();
        },
      },
    });
  }

  defineExpose({
    refresh,
  });
</script>

<style scoped></style>
